<template>
    <div style="width:100%;height:78px;display: flex;align-items: center;background:rgba(251,251,255,1);position: relative">
        <div style="display:flex;position: absolute;left:51px;">
            <p style="font-size:20px;color:rgba(102,102,102,1);">
                当前沟通职位：</p>
            <p style="font-size:20px;color:rgba(74, 176, 207, 1);">{{name}}</p>
        </div>
        <div v-if="showInvited" style="display: flex;align-items:center;position: absolute;left:492px;"
             @click="clickWhich('invite')">
            <img :src="invited.icon" alt=""/>
            <p style="margin-left: 8px;font-size:14px;" :style="invited.style">{{invited.msg}}</p>
        </div>
        <div v-if="showFit" style="display: flex;align-items:center;position: absolute;left:602px;"
             @click="clickWhich('notFit')">
            <img :src="notFit.icon" alt=""/>
            <p style="margin-left: 8px;font-size:14px;" :style="notFit.style">{{notFit.msg}}</p>
        </div>
        <div style="display: flex;align-items:center;position: absolute;left:697px;" @click="clickWhich('communicate')">
            <img :src="communicate.icon" alt=""/>
            <p style="margin-left: 8px;font-size:14px;" :style="communicate.style">{{communicate.msg}}</p>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'CommOps',
    props: {
      name: {
        type: String,
        default: '职位名称'
      },
      invitedQ: {
        type: Boolean,
        default: false
      },
      fitQ: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      showInvited() {
        if (this.fitQ) {
          return false
        } else {
          return !this.invitedQ;
        }
      },
      showFit() {
        return !this.fitQ
      },
      invited() {
        return {
          icon: this.invitedQ
            ? require('../../assets/img/communication/invitation_gray.png')
            : require('../../assets/img/communication/invitation_green.jpg'),
          msg: this.invitedQ ? '已邀请' : '邀请入职',
          style: { color: this.invitedQ ? '#999999' : '#009944' }
        }
      },
      notFit() {
        return {
          icon: this.fitQ
            ? require('../../assets/img/communication/fit_black.jpg')
            : require('../../assets/img/communication/fit_red.png'),
          msg: this.fitQ ? '已标记' : '不合适',
          style: { color: this.fitQ ? '#999999' : '#dd3a31' }
        }
      },
      communicate() {
        return {
          icon: require('../../assets/img/communication/xiaoxi_green.png'),
          msg: '沟通',
          style: { color: '#999999' }
        }
      }
    },
    methods: {
      clickWhich(which) {
        this.$emit('click-which', which)
      }
    }
  }
</script>

<style scoped>
    p {
        font-weight: 400;
    }

    img {
        width: 16px;
        height: 16px;
    }

</style>